@import "../../style/imports.scss";

.goods-comment-panel {
    $self: &;
    position: fixed;
    z-index: $z-index-modal;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate3D(0, 110%, 0);
    /*&.is-ipx {
      .goods-buy-panel__wrap {
        padding-bottom: $ipx-fix-height;
      }
    }*/
    &__active {
      transform: translate3D(0, 0, 0);
      #{$self}__overlay {
        opacity: 1;
      }
      #{$self}__wrap {
        opacity: 1;
        visibility: visible;
        transform: translate3D(0, 0, 0);
        transition-delay: 0s;
      }
    }
    &__overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(#000, 0.3);
      opacity: 0;
      z-index: $z-index-modal - 1;
      transition: all 0.15s ease-in;
    }
    &__wrap {
      position: absolute;
      bottom: 0;
      left: 0;
      opacity: 0;
      width: 100%;
      background: #fff;
      padding: 0;
      box-sizing: border-box;
      visibility: hidden;
      transform: translate3D(0, 110%, 0);
      transition: visibility 0s linear 0.15s, all 0.15s ease-out;
      z-index: $z-index-modal;
    }
    &__bd {
        padding: 20px 20px 15px;
        .reply-btns {
            margin-top: 15px;
            text-align: right;
            .count {
                font-size: 24px;
                color: #999;
            }
            .btn {
                display: inline-block;
                width: 105px;
                height: 45px;
                line-height: 45px;
                background: $color-brand-primary;
                color: #fff;
                text-align: center;
                margin-left: 15px;
                font-size: 24px;
                &.btn-disabled {
                    opacity: 0.3;
                }
            }
        }
    }
}
